iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Mobile Development

Flutter with GetX, loading*175%歷程 系列 第 14

[Day14] Flutter with GetX animated_text_kit

  • 分享至 

  • xImage
  •  

animated_text_kit

文字特殊效果的第三方,可以參考文檔的樣式作選擇
https://ithelp.ithome.com.tw/upload/images/20210928/20140296nBPlWDqZzK.png

使用起來類似是Flutter原生的RichText & TextSpan, 但炫炮很多.

totalRepeatCount: 重複播放次數,
pause: 播放結束停幾秒再開始下一輪,
stopPauseOnTap: 點下去的時候動畫暫停,

這篇借用cached_network_image的頁,下面剩餘的空間擺

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CachedImagePage')),
      body: SafeArea(
        child: SizedBox.expand(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: AnimatedTextKit(
                  animatedTexts: [
                    TypewriterAnimatedText(
                      'Hello world!',
                      textStyle: const TextStyle(
                        fontSize: 32.0,
                        fontWeight: FontWeight.bold,
                      ),
                      speed: const Duration(milliseconds: 500),
                    ),
                  ],
                  totalRepeatCount: 4,
                ),
              ),
              Expanded(
                child: AnimatedTextKit(
                  animatedTexts: [
                    FadeAnimatedText(
                      'Fade First',
                      textStyle: TextStyle(
                          fontSize: 32.0, fontWeight: FontWeight.bold),
                    ),
                    ScaleAnimatedText(
                      'Then Scale',
                      textStyle:
                          TextStyle(fontSize: 70.0, fontFamily: 'Canterbury'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

本篇的GitHub source code

下一篇將為大家介紹 Wrap & Chip


上一篇
[Day13] Flutter with GetX qr_flutter & qr_code_scanner
下一篇
[Day15] Flutter with GetX Wrap & Chip
系列文
Flutter with GetX, loading*175%歷程 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言